<template>
  <div class="app-container">
    <div class="app-container-main">
      <div class="app-container-main-col flex-1">
        <DashboardContainer rectangularIcon class="firmNumber" title="账单统计">
          <div class="firmNumber">
            <div v-for="item in firmData" :key="item.name" class="item">
              <span class="text"> {{ item.name }}</span>
              <span
                :style="{
                  color: item.showIcon
                    ? item.number >= 0
                      ? '#67c23a'
                      : '#f56c6c'
                    : '',
                  marginRight: '5px',
                }"
                class="number"
                >{{ (item.number || 0).toLocaleString() }}{{ item.unit }}
                <i
                  style="color: #f56c6c"
                  v-if="item.showIcon && item.number < 0"
                  class="el-icon-bottom"
                ></i>
                <i
                  style="color: #67c23a"
                  v-if="item.showIcon && item.number > 0"
                  class="el-icon-top"
                ></i>
              </span>
            </div>
          </div>
          <template v-slot:extra>
            <el-date-picker
              v-model="time"
              type="year"
              placeholder="选择日期"
              clearable
              format="yyyy"
              value-format="yyyy"
              class="dataPicker"
              @change="changeTime"
            >
            </el-date-picker>
          </template>
        </DashboardContainer>
        <el-card class="table-card">
          <DashboardContainer rectangularIcon class="w50" title="月账单统计">
            <BaseEchart
              :option="option"
              :series="series"
              v-if="monthData.length > 0"
            />
            <template v-slot:extra>
              <el-date-picker
                v-model="monthTime"
                type="month"
                placeholder="选择日期"
                clearable
                format="yyyy-MM"
                value-format="yyyy-MM-dd"
                class="dataPicker"
                @change="changeMonth"
              >
              </el-date-picker>
            </template>
          </DashboardContainer>
          <DashboardContainer rectangularIcon class="w50" title="月账单Top8">
            <BaseEchart
              :option="topOption"
              :series="topSeries"
              v-if="yearTopList.length > 0"
            />
            <template v-slot:extra>
              <el-date-picker
                v-model="yearTime"
                type="year"
                placeholder="选择日期"
                clearable
                format="yyyy"
                value-format="yyyy"
                class="dataPicker"
                @change="changeYear"
              >
              </el-date-picker>
            </template>
          </DashboardContainer>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import {
  billStatistic,
  monthStatistic,
  yearTopStatistic,
} from "@/api/bill/billList.js";

export default {
  name: "BillList",
  data() {
    return {
      // 遮罩层
      loading: true,
      StatisticDate: {},
      time: undefined,
      monthTime: undefined,
      yearTime: undefined,
      monthData: [],
      yearTopList: [],
    };
  },
  created() {
    this.getStatistic();
    this.$nextTick(() => {
      this.getMonthStatistic();
      this.getTop();
    });
  },
  methods: {
    changeTime() {
      this.getStatistic();
    },
    changeMonth() {
      this.getMonthStatistic();
    },
    changeYear() {
      this.getTop();
    },

    /** 查询登录日志列表 */
    async getStatistic() {
      const res = await billStatistic({ yearTime: this.time });
      this.StatisticDate = res.data;
    },
    async getMonthStatistic() {
      const res = await monthStatistic({ monthTime: this.monthTime });
      this.monthData = res.rows.sort(
        (a, b) => +new Date(a.spendingTime) - +new Date(b.spendingTime)
      );
    },
    async getTop() {
      const res = await yearTopStatistic({ yearTime: this.yearTime });
      this.yearTopList = res.rows;
    },
  },
  computed: {
    option() {
      const xData = this.monthData.map((item) => item.spendingTime);
      return {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["月账单统计"],
        },
        grid: {
          left: "2%",
          right: "2%",
          bottom: xData.length - 1 > 12 ? "6%" : 0,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: xData,
          axisTick: {
            show: false, // 不显示坐标轴刻度线
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value}元",
          },
        },
        dataZoom: [
          {
            type: "slider",
            show: xData.length - 1 > 12,
            zoomLock: true,
            brushSelect: false,
            xAxisIndex: [0],
            startValue: 0,
            endValue: 11,
            height: 15,
            bottom: 0,
            labelFormatter: "",
          },
        ],
      };
    },
    series() {
      const yData = this.monthData.map((item) => item.actualAmount);
      return [
        {
          name: "月账单统计",
          type: "line",
          smooth: true,
          data: yData,
          itemStyle: {
            normal: {
              color: "#0e8b8d", // 改变折线点的颜色
              lineStyle: {
                color: "#0e8b8d", // 改变折线颜色
              },
            },
          },
        },
      ];
    },
    topOption() {
      const xData = this.yearTopList.map((item) => item.depositTime).reverse();
      return {
        tooltip: {
          trigger: "axis",
          backgroundColor: "#fff", //背景颜色（此时为默认色）
          borderRadius: 2, //边框圆角
          textStyle: {
            color: "#333", //字体颜色
            fontSize: 12, //字体大小
            fontWeight: 300,
          },
        },
        grid: {
          top: "-10px",
          left: "5px",
          right: "0",
          bottom: "0",
          containLabel: true,
        },
        xAxis: {
          show: false,
        },
        yAxis: {
          //   隐藏y轴坐标轴
          axisLine: {
            show: false,
          },
          // 隐藏y轴刻度线
          axisTick: {
            show: false,
            alignWithLabel: true,
          },
          type: "category",
          // interval: 100,
          nameTextStyle: {
            color: "#666",
            fontSize: "12px",
          },
          data: xData,
        },
      };
    },
    topSeries() {
      const yData = this.yearTopList.map((item) => item.spendTotalPrice).reverse();
      return [
        {
          data: yData,
          type: "bar",
          showBackground: true,
          backgroundStyle: {
            color: "#F3F4F7",
          },
          barWidth: 20,
          barGap: "80%" /*多个并排柱子设置柱子之间的间距*/,
          barCategoryGap: "80%" /*多个并排柱子设置柱子之间的间距*/,
          label: {
            //内容样式
            show: true,
            formatter: "{@score}",
            color: "#333",
            // position: "insideLeft", //内部左对齐
            position: ["8", "5"], //自定义位置第一个参数为x轴方向，第二个参数为y轴方向，左上角为起点，向右向下为正数，向上向左为负数
          },
          itemStyle: {
            borderRadius: 30,
            // borderRadius : [0, 10, 10, 0], // 圆角
            color: this.$echarts.graphic.LinearGradient( // 渐变色
              1,
              0,
              0,
              0, // 渐变色的起止位置, 右/下/左/上
              [
                // offset 位置
                { offset: 0, color: "#0e8b8d" },
                { offset: 1, color: "#e7f3f4" },
              ]
            ),
          },
        },
      ];
    },
    firmData() {
      return [
        {
          name: "账单总金额",
          number: this.StatisticDate.totalPrice,
          unit: "元",
        },
        {
          name: "工资总金额",
          number: this.StatisticDate.totalWages,
          unit: "元",
        },
        {
          name: "存款总金额",
          number: this.StatisticDate.totalDeposit,
          unit: "元",
          showIcon: true,
        },
        {
          name: "花费最高金额",
          number: this.StatisticDate.topPrice,
          unit: "元",
        },
      ];
    },
    getRoles() {
      return this.$store.state.user.roles;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .table-card {
  .w50 {
    width: 50%;
  }
  .el-card__body {
    display: flex;
    justify-content: space-between;
    padding: 0 !important;
  }
}
.firmNumber {
  display: flex;
  justify-content: space-around;
  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: space-evenly;
    .number {
      font-size: 18px;
      font-weight: 700;
      color: #7f7f7f;
    }
    .text {
      font-size: 16px;
      margin-bottom: 10px;
    }
  }
}
::v-deep .dataPicker {
  height: 30px;
  line-height: 30px;
  width: 200px !important;
  .el-input__inner {
    height: 30px;
  }
  .el-input__icon {
    line-height: 30px;
  }
}
</style>

